在前面學會字串、陣列與物件操作後,我們已經能有效管理與處理資料。
今天要學習的是計時器(Timer),它能讓網頁「等待」一段時間後執行動作,或以固定時間間隔重複執行任務。計時器是實現動態效果、定時更新與互動的重要工具。
setTimeout()
setTimeout 可以在指定的延遲時間後執行一次程式碼。
例如:顯示倒數計時結束的提示訊息,或延遲顯示一段文字,給使用者閱讀的時間。
setInterval()
setInterval 會按照設定的時間間隔,不斷重複執行程式碼。
例如:每秒更新時鐘時間、實現輪播圖自動切換、或定時抓取最新資料並更新畫面。
兩者都可以搭配 clearTimeout() 或 clearInterval() 停止計時器,避免無限循環或不必要的資源消耗。
計時器的應用範例
倒數計時:在活動頁面、測驗或遊戲中,顯示剩餘時間,提醒使用者時間限制。
輪播圖:自動切換圖片或廣告,提升網頁視覺效果與互動性。
定時更新內容:例如即時顯示天氣、股價或社群訊息,保持資料最新。
延遲效果:延遲顯示提示訊息、動畫或功能,提升使用者體驗。
計時器可以與 DOM 操作、事件處理結合,實現更生動、互動的網頁效果。
例如:當使用者點擊按鈕後,先顯示「資料處理中…」,一秒後才更新畫面,讓操作感覺更自然。
學習心得
透過計時器,我發現網頁可以更智慧地「掌握時間」,不再只是靜態呈現資訊。
我最喜歡用 setInterval 實現輪播圖,因為簡單幾行程式就能讓畫面自動更新,非常直觀又有趣。
setTimeout 讓我知道程式能控制等待與延遲,處理互動或動畫時非常實用。
掌握計時器後,我能讓網頁更有生命力,不再只是靜態展示文字或圖片,而是會「等待、思考並回應使用者」。